<template>
	<view class="car-item" @click="$emit('click',data)">
		<view class="setting-box flex a-i-c j-c-b color-999 f-s-22" v-if="showTop">
			<view class="">
				{{data.province_text||""}} | 发布于{{create_time}}
			</view>
			<view class="setting-view">
				<image class="icon" @click="showOperate" src="@/static/images/circle/set-icon.svg" mode=""></image>
				<view class="operate-box flex a-i-c f-d-c" :class="operate_show?'heightauto':'o-height0'">
					<view class="item f-s-28 color-fff flex a-i-c"  v-if="data.del_btn">
						<image class="o-icon" src="@/static/images/circle/set-del-icon.svg" mode=""></image>
						删除
					</view>
					<view class="item f-s-28 color-fff flex a-i-c" v-if="data.edit_btn" @click="editInfo">
						<image class="o-icon" src="@/static/images/circle/set-del-icon.svg" mode=""></image>
						编辑 
					</view>
				</view>
			</view>
		</view>
		<view class="title-money-box flex a-i-c j-c-b">
			<view class="f-s-34 color-333">
				{{data.title}}
			</view>
			<view class="f-s-34 color-FF3158 f-w-b">
				<block v-if="fondCarTab === 1">
					<text class="f-s-26 color-999">￥</text>{{data.first_price || 0}}
				</block>
			</view>
		</view>
		<view class="flex a-i-c w-100 j-c-b">
			<view class="loc-time-box flex a-i-c color-999 f-s-24">
				<view class="left flex a-i-c">
					<image class="icon" src="@/static/images/circle/location-icon.svg" mode=""></image>
					起始地:{{data.first_address_desc}}
				</view>
				<view class="left flex a-i-c">
					<image class="icon" src="@/static/images/circle/send-time-icon.svg" mode=""></image>
					出发时间:{{data.send_time}}
				</view>
			</view>
		</view>
		<view class="w-100 flex a-i-c j-c-b">
			<view class="btn-left flex a-i-c f-s-24 color-2567F3">
				<view class="left-item" v-if="data.first_province_id_text">
					{{data.first_province_id_text || ""}}
				</view>
				<view class="left-item">
					{{data.weight || 0}}
				</view>
			</view>
			<view class="right-btn color-fff f-s-24" style="white-space: nowrap;" @click.stop="callPhone">
				{{fondCarTab === 2?'联系车主':'联系货主'}}
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import {goTo} from "@/nav.js"
	export default {
		name:"carBox",
		props:{
			showTop:{
				type:Boolean,
				default(){
					return false
				}
			},
			data:{
				type:Object,
				default(){
					return {}
				}
			},
			stab_id:{
				type:String,
				default:""
			}
		},
		computed:{
			...mapGetters(["fondCarTab"]),
			create_time(){
				if(this.data.createtime){
					let date = new Date(this.data.createtime*1000)
					let yyyy = date.getFullYear()
					let mm = date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
					let dd = date.getDate()<10?`0${date.getDate()}`:date.getDate()
					return `${yyyy}-${mm}-${dd}`
				}
			},
		},
		data() {
			return {
				operate_show:false,
				button_text:""
			};
		},
		methods:{
			editInfo(){
				let item = JSON.stringify(this.data)
				this.$store.commit("changePageTabInfo",item)
				let type = this.stab_id === '2'?'3':'4'
				let title = this.stab_id === '2'?'找货':'找车'
				this.operate_show = false
				goTo({url:`/pages/pageTab/index?type=${type}&title=${title}`})
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.data.mobile
				})
			},
			showOperate(){
				this.operate_show = !this.operate_show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.car-item{
		width: 100%;
		padding: 0 0 26upx;
		border-bottom: 2upx solid #F4F4F4;
		margin-bottom: 28upx;
		.car-info-box{
			width: 100%;
			.left-image{
				width: 224upx;
				height: 168upx;
				margin-right: 22upx;
			}
			.right{
				width: calc(100% - 224upx - 22upx);
				height: 168upx;
				.title{
					line-height: 42upx;
					margin-bottom: 4upx;
				}
				.km-view{
					line-height: 34upx;
					margin-bottom: 8upx;
				}
			}
		}
		.setting-box{
			width: 100%;
			margin-bottom: 20upx;
			.setting-view{
				position: relative;
				.icon{
					width: 32upx;
					height: 32upx;
				}
				.operate-box{
					position: absolute;
					z-index: 3;
					width: 144upx;
					background: rgba(0, 0, 0, 0.7);
					backdrop-filter: blur(4upx);
					border-radius: 8px;
					right: 0;
					transition: all .2s ease-in;
					// padding: 24upx 0;
					overflow: hidden;
					.item{
						margin-top: 24upx;
						.o-icon{
							width: 38upx;
							height: 38upx;
							margin-right: 16upx;
						}
					}
				}
				.o-height0{
					height: 0;
				}
				.heightauto{
					height: 156upx;
				}
			}
		}
		.right-btn{
			padding: 8upx 20upx;
			background: #4981F2;
			border-radius: 4upx;
		}
		.btn-left{
			.left-item{
				padding: 4upx 14upx;
				border: 1upx solid #2567F3;
				border-radius: 4upx;
				margin-right: 34upx;
			}
		}
		.loc-time-box{
			width: 100%;
			margin-bottom: 24upx;
			.left{
				width: 50%;
				line-height: 34upx;
				.icon{
					width: 36upx;
					height: 36upx;
					margin-right: 4upx;
				}
			}
		}
		.title-money-box{
			width: 100%;
			margin-bottom: 16upx;
			line-height: 48upx;
		}
	}
</style>